<template>
  <div class="print-style">
    <el-button @click="onOpenDialog">点击打开打印弹窗</el-button>
    <print
      ref="print"
      :column="[
        { label: '姓名', prop: 'name' },
        { label: '电话', prop: 'phone' },
        { label: '住址', prop: 'address' },
      ]"
      :dataList="data.list"
    >
    </print>
    <el-table
      ref="multipleTable"
      :data="dataList"
      style="width: 100%; margin-top: 10px;"
      border=""
      @selection-change="selectionChangeHandle"
      :header-cell-style="headClass"
      :cell-style="rowClass"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="55"> </el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="电话" prop="phone"></el-table-column>
      <el-table-column label="住址" prop="address"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
import print from "@/components/print/index.vue";
export default {
  components: { print },
  data() {
    return {
      data: {},
      index: "4",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dataList: []
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 获取表格数据
    getDataList() {
      this.currentPage = 1,
      this.pageSize = 10;
      axios.post("/table/list").then((res) => {
        this.data = {
          list: res.data.rows,
          total: res.data.total,
        };
        this.total = res.data.total;
        for (let i = 0; i < this.data.list.length; i++) {
          if (i % 2) {
            this.data.list[i].remark = "是";
            this.data.list[i].select = "130000";
          } else {
            this.data.list[i].remark = "否";
            this.data.list[i].select = "110000";
          }
        }
        this.dataList = this.deepClone(this.data.list);
        this.paging();
      });
    },
    // 预览 再打印
    onOpenDialog() {
      this.$refs.print.printDialogVisible = true;
    },
    // 分页
    paging() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      let start = (currentPage - 1) * pageSize;
      let list = this.deepClone(this.data.list);
      this.dataList = list.splice(start, pageSize);
    },
    /**
     * 多选
     * @param val
     */
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    /**
     * 每页数
     * @param val
     */
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.paging();
    },
    /**
     * 当前页
     * @param val
     */
    currentChangeHandle(val) {
      this.currentPage = val;
      this.paging();
    },
    //表头居中显示
    headClass() {
      return "text-align:center";
    },
    //表格数据居中显示
    rowClass() {
      return "text-align:center";
    },
  },
};
</script>

<style>
</style>